<template>
  <div class="setting-r-content" style="overflow-y:auto;">
    <Row class="setting-r-c_params">
      <Col span="24" class="col_1">
      <Icon style="font-size:20px;" type="md-reorder" />
      <h2>网关设备列表</h2>
      </Col>
      <Col span="24" class="col_2">
      <div class="button_add">
        <Button size="small" @click="addNew">新增</Button>
      </div>
      <div class="table_list">
        <Table border :columns="columns" :data="tableData" :loading="loading" />
      </div>
      </Col>
      <Modal v-model="dialogVisible" :title="isEdit?'编辑网关设备':'新建网关设备'">
        <Form :model="addForm" :label-width="80" ref="refAdd" :rules="rules">
          <FormItem label="采集类型" prop="gatewayType">
            <Select style="width:80%;" v-model="addForm.gatewayType" filterable @on-change="selectCity"
              :disabled="isEdit">
              <Option v-for="(item,index) in gatewayList" :value="item.desCode" :key="index" :label="item.des" />
            </Select>
          </FormItem>
          <FormItem label="端口:" prop="port">
            <Input style="width:80%;" v-model="addForm.port" placeholder="端口..." :disabled="isEdit" />
          </FormItem>
          <FormItem label="设备代码:">
            <Input style="width:80%;" v-model="addForm.gatewayCode" placeholder="设备代码..." />
          </FormItem>
          <FormItem label="设备编号:">
            <Input style="width:80%;" v-model="addForm.gatewayId" placeholder="设备编号..." />
          </FormItem>
          <FormItem label="网关名称:" prop="name">
            <Input style="width:80%;" v-model="addForm.name" placeholder="请输入网关名称..." />
          </FormItem>
          <FormItem label="采集频率:" prop="collectPeriod">
            <Input style="width:80%;" v-model="addForm.collectPeriod" placeholder="采集频率..." />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="dialogVisible=false;" type="text">取消</Button>
          <Button :loading="btnDisabled" type="primary" @click="onSubmit">
            <span v-if="!btnDisabled">确认</span>
            <span v-else>保存中</span>
          </Button>
        </div>
      </Modal>
    </Row>
  </div>
</template>
<script>
import { generatedColnumsList, rulesList } from './utils'
import {
  postGatewayList,
  getGatewayType,
  getGatewayList,
  putGatewayList,
  delGatewayList
} from '@/api'
export default {
  mounted() {
    this.getGatewayList()
  },
  data() {
    const vm = this
    return {
      dialogVisible: false,
      isEdit: false,
      editId: '',
      loading: false,
      columns: [...generatedColnumsList(vm)],
      tableData: [],
      gatewayList: [],
      addForm: {
        gatewayType: '',
        port: '',
        collectPeriod: '',
        name: '',
        gatewayCode: '',
        gatewayId: ''
      },
      rules: {
        ...rulesList
      },
      btnDisabled: false
    }
  },
  methods: {
    getGatewayList() {
      this.loading = true
      getGatewayList().then(res => {
        if (res.code === 200) {
          this.tableData = res.data
          this.loading = false
        }
      })
    },

    // 新增
    addNew() {
      this.isEdit = false
      this.dialogVisible = true
      this.btnDisabled = false
      this.getGatewayTypeList()
      this.$nextTick(() => {
        this.$refs.refAdd.resetFields()
        this.addForm = Object.assign(this.addForm, {
          gatewayType: '',
          port: '',
          collectPeriod: '',
          name: '',
          gatewayCode: '',
          gatewayId: ''
        })
      })
    },

    handleEdit(row) {
      this.isEdit = true
      this.dialogVisible = true
      this.btnDisabled = false
      this.getGatewayTypeList()
      this.addForm = row
      this.addForm.gatewayType = Number(row.gatewayType)
      this.editId = row.id
    },

    // 确定新增
    onSubmit() {
      const vm = this
      const isEdit = vm.isEdit
      let params = {
        ...vm.addForm
      }
      delete params.gatewayId
      vm.$refs.refAdd.validate(valid => {
        if (valid) {
          vm.btnDisabled = true
          if (!isEdit) {
            vm.onSubmitNew()
          } else {
            vm.onSubmitEdit()
          }
        }
      })
    },

    onSubmitNew() {
      const vm = this
      let params = {
        ...vm.addForm
      }
      postGatewayList(params).then(res => {
        if (res.code === 200) {
          vm.getGatewayList()
          vm.btnDisabled = false
          vm.dialogVisible = false
        } else {
          vm.$Message.error(res.message)
          vm.btnDisabled = false
        }
      })
    },

    onSubmitEdit() {
      const id = this.editId,
        vm = this
      const params = Object.assign({}, vm.addForm, { id })
      putGatewayList(params).then(res => {
        if (res.code === 200) {
          vm.getGatewayList()
          vm.btnDisabled = false
          vm.dialogVisible = false
          vm.$Message.success('操作成功')
        } else {
          vm.$Message.error(res.message)
          vm.btnDisabled = false
        }
      })
    },

    // 获取网关列表
    getGatewayTypeList() {
      const vm = this
      vm.loading = true
      getGatewayType().then(res => {
        if (res.code === 200) {
          const data = res.data || []
          vm.gatewayList = data || []
          vm.loading = false
        }
      })
    },

    // 删除
    handleDelete(id) {
      const vm = this
      delGatewayList(id).then(res => {
        if (res.code === 200) {
          vm.getGatewayList()
          vm.$Message.success('操作成功')
        } else {
          vm.$Message.error(res.message)
        }
      })
    }
  }
}
</script>
